<template>
  <div id="app">
    <keep-alive>
      <component :is="componentNamme" :ref="componentNamme"/>
    </keep-alive>
  </div>
</template>

<script>
import tomatoIndex from './components/tomato/index.vue'
import mainPage from './components/tomatoMain/mainPage.vue'
import noFind from './components/tomatoMain/noFind.vue'

import { mapState  } from 'vuex'
let ten = (n)=>{
    if (n < 10) {
        return '0' + n;
    } else {
        return n;
    }
}
export default {
  name: 'App',
  data () {
    return { 
      componentNamme: 'mainPage',
      cNameList: [
        'noFind',  // 尚未开发
        'mainPage',  // 主界面
        'tomatoIndex', // 番茄钟
        'regularlyremind',  // 定时提醒
      ],
    }
  },
  mounted() {
    
    setInterval(()=>{
      /* 番茄钟界面计时任务 */ 
      if (this.isRuning && this.taskduringTime > 0) {
            this.$store.commit("set_hasProcessTime", this.hasProcessTime + 1);
            this.$store.commit("set_taskduringTime", this.taskduringTime - 1);
        }
      if (this.componentNamme == 'tomatoIndex') {
        let tomato = this.$refs.tomatoIndex.$refs.todayPlan;
        tomato.currentTime();
        tomato.curTime = `${tomato.date.year}年${tomato.date.mounth}月${tomato.date.date}日 ${tomato.date.hour}:${tomato.date.minute}:${tomato.date.second}`;
      }
      let t = new Date();
      // 闹钟时间
      this.$store.commit("set_currentDate", `${ten(t.getHours())}:${ten(t.getMinutes())}`);
    }, 1000 )
  },
  methods: {
    changeComponent(flag) {
      if (flag > 3) {
        this.componentNamme = this.cNameList[0]
      } else {
        this.componentNamme = this.cNameList[flag]
      }
      
    }
  },
  components: {
    tomatoIndex,
    mainPage,
    noFind,
    regularlyremind:() => import('./components/tomato/regularlyremind.vue'),
  },
  computed:{
      ...mapState([
          'isRuning',
          'hasProcessTime',
          'taskduringTime',
          'currentDate',
      ])
  }
}
</script>

<style lang='less' scoped>
@import url(./assets/css/common.less);
@import "../src/assets/css/iconfont.css";

#app {
  .wandh(100%, 100vh);
}
</style>
